<template>
  <div class="big">
    <div class="head">
      <el-form ref="userData" :model="userData" label-width="20px">
        <el-input placeholder="请输入订单号" v-model="Search.nfuhTotalorder.totalorderNumber"></el-input>
      </el-form>
      <el-form ref="userData" :model="userData" label-width="20px">
        <el-form-item>
          <el-select v-model="userData.region" placeholder="选择状态">
            <el-option label="已支付" value="1"></el-option>
            <el-option label="未支付" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form ref="userData" :model="userData" label-width="20px">
        <el-form-item>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="开台时间"
              v-model="userData.date1"
              style="width: 200px"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">——</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="开台时间"
              v-model="userData.date2"
              style="width: 200px"
            ></el-time-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="onSubmit(Search)"
        >搜索</el-button
      >
    </div>
    <div class="biaoge">
      <div class="top">
        <table class="topTable" v-for="itme in orderData" :key="itme.id">
          <thead>
            <tr>
              <td>订单号：{{ itme.totalorderNumber }}</td>
              <td>总金额：{{ itme.totalorderPrice }}</td>
              <td>开台时间：{{ itme.totalorderStarttime }}</td>
              <td>房间号:{{ itme.totalorderRoomNum }}</td>
              <td>服务员：{{ itme.totalorderNumService }}人</td>
              <td>开台人：{{ itme.totalorderCustomer }}</td>
              <td>
              <!-- <td><a href="" @click.prevent="updata(itme.id)">查看</a> -->
                <el-button type="success" size="small" @click.prevent="updata(itme.id)" >查看</el-button>
              </td>
              <!-- <td>{{itme.totalorderTstStatus}}</td> -->
              <td v-if="itme.totalorderTstStatus == '待支付'">
                <!-- <button @click="pay(itme.id)">结算</button> -->
                <el-button type="warning" size="small" @click="pay(itme.id)" style="width:68px">结算</el-button>
              </td>
              <td v-else> <el-button type="warning" size="small" >已支付</el-button></td>

              <!-- <div><a href=""></a></div>
                  <div></div> -->
            </tr>
            <tr>
              <td>项目</td>
              <td>数量</td>
              <td>原价</td>
              <td>优惠价格</td>
              <td>技师</td>
              <td>上中时间</td>
              <td>下钟时间</td>
            </tr>
          </thead>
          <tbody
            class="buttom"
            v-for="itmes in itme.nfuhOrderList"
            :key="itmes.id"
          >
            <tr>
              <td>{{ itmes.orderServicetype }}</td>
              <td>{{ itmes.orderNumber }}</td>
              <td>{{ itmes.orderPrice }}</td>
              <td>{{ itmes.orderPrice }}</td>
              <td>{{ itmes.orderTechnician }}</td>
              <td>{{ itmes.orderLastClocktime }}</td>
              <td>{{ itmes.orderNextClocktime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
   <div class="page">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="startpage" :page-sizes="[3, 5,7,9]" :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
   </div>
  </div>
</template>

<script>
import api from "../../http/api";
import { createNamespacedHelpers } from "vuex";
const { mapActions,mapState } = createNamespacedHelpers("order");

export default {
  data() {
    return {
      userData: {
        id: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      orderData: [],
      Search: 
            {nfuhTotalorder:{totalorderNumber: '',totalorderTstStatus: ''},
             payTime: [],
                    page:1,
                    limit:5
            },
    };
  },
  mounted() {
    this.getOrder();
  },
  computed:{
    ...mapState(['pagesize', 'startpage', 'total', 'pagesize', 'list'])

  },
  methods: {
    ...mapActions(["getOrderById","search",'getOrder']),
      handleSizeChange(val) {
                this.getOrder(val)
            },
            handleCurrentChange(val) {
                this.getOrder(val)
            },

    async onSubmit(Search) {
      // console.log("submit!");
       await this.search(Search)
       this.orderData=this.list
    },

    async getOrder() {
      const data = await api.order.getOrder();
      console.log("订单数据", data);
      this.orderData = data.data.object.list;
      console.log(this.orderData);
    },
    updata(id) {
      this.getOrderById(id);
      this.$router.push("details");

      // console.log(333)
      // this.$router.push(`/index/details/${id}`)
      // const data = await apis.details.getOrderById(id)
      // console.log(3333333,data)
    },
    pay(id){
      this.getOrderById(id);
      this.$router.push('pay')
    }
  },
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.big {
  background-color: #eff2f6;
  width: 1024px;
  height: 700px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.head {
  width: 1024px;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 5px;
  .line {
    text-align: center;
  }
  .el-button {
    height: 40px;
    margin-left: 30px;
  }
  .el-input {
    margin-left: 10px;
  }
}
.top {
  width: 1000px;
  height: 30px;
  border-radius: 5px 5px 0 0;
  background-color: #acc8e5;
  margin: 0 auto;
  line-height: 20px;
  .topTable {
    width: 1000px;
    text-align: center;
    line-height: 30px;
    background-color: #acc8e5;
    border-radius: 5px;
    border:solid white 1px;
    margin-top:10px 
  }
}
.buttom {
  background-color: white;
  width: 1000px;
  margin: 0 auto;
  border-radius: 0px 0px 5px 5px;
  td{
     border-radius:5px
  }
}
.page{
  margin: 0 auto;
  margin-top: 540px ;
  width: 500px;
  .el-pagination{
    width: 500px;
  }
}
</style>